<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="./dist/jquery-3.2.1.js"></script>
	<title></title>
</head>
<style type="text/css">
*{margin:0;top:0;}
</style>
<body>
<h3>1.基础选择器</h3>
<h1 id='s'>aaaaaaaaaaaaaaaaa</h1>
<h1 class='ss'>bbbbbbbbbbbbbbbbb</h1>
<h1>ssssssssssssssssssss</h1>
<p>ddddddddddddddsfdssdfs</p>



<h3>2.层级选择器3.基本选择器</h3>
<div class='div'>
	<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
	<div class='div2'>
		<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
		<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
	</div>
</div>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>




<h3>4.内容选择器</h3>
<div><h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1></div>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>        </h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<div><p></p><p>aaaaaaaaaaaaaa</p></div>
<div><p></p><p>bbbbbbbbbbbbbbbb</p></div>


<h3>5.属性选择器</h3>
<h1 name='user111' age='19'>aaaaaaaaaaaaaaaaa</h1>
<h1 name='php121'>aaaaaaaaaaaaaaaaa</h1>
<h1 name='java123'>aaaaaaaaaaaaaaaaa</h1>



<h3>6.子元素选择器</h3>
<div>
	<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
</div>
<div>
	<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
</div>
<div>
	<h1>aaaaaaaaaaaaa</h1>
</div>
</body>
<script type="text/javascript">
//首先说明，所有下标都从0开始，下文不再重申，并且下文中所有的实例都是一一对应的



//1.这种方法用来检测是否成功包含jquery.js文件
alert($);
//2。如果一个html文件里有许多矿架，则用第二种方法
alert(jQuery);


//1.基础选择器（元素 id  类名 组合选择器 所有）
	$('h1').css({'color':'#f0f'});
	$('#s').css({'color':'#f0f'});
	$('.ss').css({'color':'#f0f'});
	$('h1,p').css({'color':'#f0f'});
	$('*').css({'color':'#f0f'});


//2.层级选择器（祖先与后代  父子 前一个和后一个 前一个和后面所有元素）
$('.div h1').css({'color':'#f0f'});
$('.div>h1').css({'color':'#f0f'});
$('.div+h1').css({'color':'#f0f'});
$('.div~h1').css({'color':'#f0f'});

//3.基本选择器（第一个 下标大于1 下标小于1 第一个 最后一个 除了第一个的所有 下标为偶数 下标为奇数）
$('h1:eq(0)').css({'color':'#f0f'});
$('h1:gt(1)').css({'color':'#f0f'});
$('h1:lt(1)').css({'color':'#f0f'});
$('h1:first').css({'color':'#f0f'});
$('h1:last').css({'color':'#f0f'});
$('h1:not(:first)').css({'color':'#f0f'});
$('h1:even').css({'color':'#f0f'});
$('h1:odd').css({'color':'#f0f'});

//4.内容选择器
//寻找div：里面有h1标签的div
$('div:has(h1)').css({'color':'#f0f'});
//寻找div内容为非空的div
$('div:not(:empty)').css({'color':'#f0f'});
//寻找空内容的div给它添加内容
$('p:empty').html('xxxxxxxxxx').css({'color':'#f0f'});
//组合
$('div,h1:parent').css({'color':'#f0f'});





//5.属性选择器
//h1标签有name的h1标签
$('h1[name]').css({'color':'#f0f'});
//h1里面name为user111的h1标签
$('h1[name=user111]').css({'color':'#f0f'});
//h1标签name以php开头的h1标签
$('h1[name^=php]').css({'color':'#f0f'});
//h1标签name以123结尾的h1标签
$('h1[name$=123]').css({'color':'#f0f'});
//h1标签有name和age的h1标签
$('h1[name][age]').css({'color':'#f0f'});
//h1里面name不为123的h1标签
$('h1[name!=123]').css({'color':'#f0f'});

//6.子元素选择器
//div里面第一个h1
$('div h1:first-child').css({'color':'#f0f'});
//div里面最后一个h1
$('div h1:last-child').css({'color':'#f0f'});
//div里面只有唯一一个h1
$('div h1:only-child').css({'color':'#f0f'});

</script>
</html>